<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Product">
<head>
    <meta charset="utf-8">
    <title>Fruit Juice for Windows Phone 8</title> <!-- @app-name -->
    <meta name="description" content="Fruit Juice is a Metro UI inspired HTML5 template. With Fruit Juice you can easily create a website to promote your Windows Phone 7 app!"> <!-- @app-description -->
    <meta name="author" content="Salvatore Gentile"> <!-- @website-developer -->

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">

    <link rel="stylesheet" href="./stylesheets/reset.css">
    <link rel="stylesheet" href="./stylesheets/responsive-gs-12col.css">
    <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css"/>
    <![endif]-->
    <link rel="stylesheet" href="./javascripts/MetroJs/MetroJs.lt.css">
    <link rel="stylesheet" href="./stylesheets/media-queries.css">
    <link rel="stylesheet" href="./stylesheets/win-phone-8.css">

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->

    <!-- Favicon + iOS Icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    
    <!-- Google Plus button details -->
    <meta itemprop="name" content="Fruit Juice">
    <meta itemprop="description" content="Fruit Juice is a Metro UI inspired HTML5 template. With Fruit Juice you can easily create a website to promote your Windows Phone 7 app!">
    <meta itemprop="image" content="./images/tile.png">
</head>

<body>
    <div class="container">
        <header class="row span_8">
            <img id="small-logo" src="images/small-logo.png" /> <!-- @small-logo -->          
            <h3>Fruit Juice for Windows Phone 8</h3> <!-- @app-name -->
        </header>

        <section id="brand" class="row span_12">
            <div class="row span_8">
                <div class="col span_8">
                    <p>
                        Fruit Juice is a Metro UI inspired HTML5 template. With Fruit Juice you can easily create a website to promote your Windows Phone 8 app!
                    </p>
                </div>

                <div class="col span_4">
                    <div id="wp_frame">
                        <div id="screen">
                            <div><img src="./images/screens/s1.jpg" alt="" /></div>
                            <div><img src="./images/screens/s2.jpg" alt="" /></div>
                            <!-- Add more screenshoot here! -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="row span_8">
            <div id="details" class="col span_8">
                <h2>Description</h2>
                <p class="description">
                    Fruit Juice is a Metro UI inspired HTML5 template. With Fruit Juice you can easily create a website to promote your Windows Phone 7 app!
                </p>

                <h2>Features</h2>
                <ul>
                    <li>QRCode integrated in the app tile;</li>
                    <li>Responsive layout;</li>
                    <li>Live tiles;</li>
                    <li>Share buttons with counter;</li>
                    <li>Screenshot slider;</li>
                    <li><a href="http://fruitjuice.codeplex.com/">Free and Open Source!</a></li>
                </ul>
            </div> <!-- /details -->
        
            <div id="showcase" class="col span_4">            
                <div id="tile" class="live-tile" data-mode="slide" data-delay="-1">
                    <div class="front-tile">
                        <a href="#"><img src="images/tile.png" /></a> <!-- @apptile - tile.png -->
                        <span>Fruit Juice</span>
                    </div>
                    <div>
                        <a href="#"><img src="images/tile-qr.png" style="height: 100%; width: 100%;" /></a> <!-- QR Code - tile-qr.png -->
                    </div>
                </div>
                
                <a href="http://goo.gl/yUZ5y">
                    <img src="./images/store/WindowsPhone_208x67_blk.png" class="download"> <!-- *_blk.png - *_blu.png -->
                </a>
                
                <div id="sharrre">
                    <div id="shareme" data-url="http://fruitjuice.codeplex.com" data-text="Fruit Juice, a Metro UI inspired HTML5 template!" data-title="shared this app"></div>
                </div>
            </div> <!-- /showcase -->
        </section>

        <hr class="span_8">

        <section id="key-features" class="row span_8">
            <div class="col span_4">
                <h4>Modern UI</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus lacinia risus, et convallis felis vulputate id.
                </p>
            </div>

            <div class="col span_4">
                <h4>Responsive Layout</h4>
                <p>
                    Integer cursus sodales molestie. Pellentesque consectetur mattis diam, quis malesuada velit iaculis a.
                </p>
            </div>

            <div class="col span_4">
                <h4>Live tiles</h4>
                <p>
                    Proin nisi lorem, hendrerit at vulputate sit amet, bibendum at mi. Integer posuere tortor in nibh auctor molestie.
                </p>
            </div>
        </section> <!-- /key-features -->

        <footer class="row span_12">
            <div class="row span_8">
                <div class="row span_11">           
                    <div class="menu">
                        <p>
                            <a href="#">Home</a> <!-- @homepage -->
                            <span> | </span>
                            <a href="mailto:">Contact</a> <!-- @suppor-email -->
                            <!-- Add more link here!! -->
                        </p>
                    </div>

                    <div class="copyright">
                        <p><a href="http://fruitjuice.codeplex.com">Fruit Juice</a> Template by <a href="http://www.salgentile.eu">Sal Gentile</a></p>
                    </div>
                </div>
            </div>
        </footer>
    </div> <!-- /container -->
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="./javascripts/jquery.fittext.js"></script>
    <script src="./javascripts/jquery.cycle.all.js"></script>
    <script src="./javascripts/MetroJs/MetroJs.lt.js"></script>
    <script src="./javascripts/jquery.sharrre-1.3.3.min.js"></script>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
        {lang: 'en'}
    </script>
    <script src="./javascripts/main.js"></script>
</body>
</html>